<!--贴图层相关属性，详情请参考官网-->
<template>
  <div
    class="attribute"
    :style="'max-height:' + ($store.state.windowAttributes.height + 300) + 'px'"
  >
    <a-form-item label="动画">
      <a-radio-group
        v-model:value="selectMapComponent.layerStyle.animate"
        @change="changeAnimate"
      >
        <a-radio :value="true">开启</a-radio>
        <a-radio :value="false">关闭</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="图标纹理">
      <a-select
        class="inputStyle"
        v-model:value="selectMapComponent.layerStyle.texture"
        :getPopupContainer="(triggerNode) => triggerNode.parentNode"
      >
        <a-select-option
          :value="optionItem.value"
          v-for="optionItem in textureOption"
        >
          {{ optionItem.label }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="描边宽度">
      <a-input-number
        class="inputStyle"
        :min="0"
        :max="50"
        v-model:value="selectMapComponent.layerStyle.borderWidth"
      />
    </a-form-item>
    <a-form-item v-if="selectMapComponent.layerStyle.texture" label="动画(ms)">
      <a-input-number
        :disabled="!selectMapComponent.layerStyle.animate"
        class="inputStyle"
        :min="0"
        :max="10000"
        :step="100"
        v-model:value="selectMapComponent.layerStyle.duration"
      />
    </a-form-item>
    <template v-if="!selectMapComponent.layerStyle.texture">
      <a-form-item label="填充色">
        <color-picker v-model:pureColor="selectMapComponent.layerStyle.color" />
      </a-form-item>
      <a-form-item label="描边色">
        <color-picker
          v-model:pureColor="selectMapComponent.layerStyle.borderColor"
        />
      </a-form-item>
    </template>
    <a-form-item label="长度">
      <a-input-number
        :min="10"
        class="inputStyle"
        v-model:value="selectMapComponent.layerStyle.size[0]"
      />
    </a-form-item>
    <a-form-item label="宽度">
      <a-input-number
        :min="10"
        class="inputStyle"
        v-model:value="selectMapComponent.layerStyle.size[1]"
      />
    </a-form-item>
    <a-form-item label="海拔">
      <a-input-number
        class="inputStyle"
        :min="0"
        v-model:value="selectMapComponent.layerStyle.altitude"
      />
    </a-form-item>
    <a-form-item label="角度">
      <a-input-number
        :min="0"
        :max="360"
        class="inputStyle"
        v-model:value="selectMapComponent.layerStyle.rotation"
      />
    </a-form-item>
    <!-- 增加slot -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: ['selectMapComponent'],
  data() {
    return {
      textureOption: [
        { label: '无', value: '' },
        {
          label: '雷达(蓝)',
          value:
            'https://a.amap.com/Loca/static/loca-v2/demos/images/scan_blue.png',
        },
        {
          label: '雷达(金)',
          value:
            'https://a.amap.com/Loca/static/loca-v2/demos/images/scan_yellow.png',
        },
        {
          label: '警告',
          value:
            'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_yellow.png',
        },
        {
          label: '失败',
          value:
            'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
        },
        {
          label: '成功',
          value: 'https://a.amap.com/Loca/static/static/green.png',
        },
      ],
    };
  },
  methods: {
    changeAnimate(val) {
      this.selectMapComponent.layerStyle.duration = val.target.value ? 1500 : 0;
    },
  },
};
</script>
<style lang="less" scoped>
.attribute {
  .inputStyle {
    width: 160px;
  }
}
/deep/ .vc-color-wrap {
  width: 160px;
}
</style>
